<template>
    <div id="dl"  >
        <div v-if="this.token  ==''">
            <van-button id="tou"  @click="show = true" >
                <van-icon  name="manager" />
            <p id="djdl">点击登录</p>         
            <p id="xys">></p>
            </van-button>
        </div>
        <div v-if="this.token != ''">
            <div id="tou" >
                <p id="mz">{{ names }}</p> 
                 <van-button v-if="this.token != ''"  @click="shan()" id="cha">×</van-button>
                

             </div>
        </div>
       
        <van-overlay :show="show" >
        <div class="wrapper" @click="show=false">
            <div class="block" @click.stop > <van-form @submit="onSubmit">
                <van-field id="user"
                  v-model="username"
                  name="username"
                  label="用户名"
                  placeholder="用户名"
                  :rules="[{ required: true, message: '请填写用户名' }]"
                />
                <van-field id="password"
                  v-model="password"
                  type="password"
                  name="password"
                  label="密码"
                  placeholder="密码"
                  :rules="[{ required: true, message: '请填写密码' }]"
                />
                <div style="margin: 16px;" id="tj">
                  <van-button round block type="info" native-type="submit" @click="show=false">提交</van-button>
                </div>
              </van-form></div>
        </div>
        </van-overlay>



        <van-grid :column-num="3"  :square="true" >
            <van-grid-item icon="label-o" text="我的订单" @click="fun()"/>
            <van-grid-item icon="bill-o" text="优惠券" @click="fun()"/>
            <van-grid-item icon="goods-collect-o" text="礼品卡" @click="fun()"/>
            <van-grid-item icon="location-o" text="我的收藏" @click="fun()"/>
            <van-grid-item icon="flag-o" text="我的足迹" @click="fun()"/>
            <van-grid-item icon="contact" text="会员福利" @click="fun()"/>
            <van-grid-item icon="aim" text="地址管理" @click="fun()"/>
            <van-grid-item icon="warn-o" text="账号安全" @click="fun()"/>
            <van-grid-item icon="service-o" text="联系客户" @click="fun()"/>
            <van-grid-item icon="question-o" text="帮助中心" @click="fun()"/>
            <van-grid-item icon="smile-comment-o" text="意见反馈" @click="fun()"/>
          </van-grid>
        <v-slot></v-slot>
    </div>
</template>

<script>
// import Vue from 'vue'
// import {Toast} from 'vant'

// Vue.use(Toast)

import vSlot from '../components/dibu.vue'
import {Getdenglu} from '../request/app.js'
export default {
    data() {
        return {
            show: false,
            username: '',
            password: '',
            token:'',
            use:'',
            names:''
        };
    },
    components:{
        vSlot
    },
    mounted() { 
        
    },

    methods: {
        // fun(){
        //     // this.$toast('提示内容');
        // },
      
        onSubmit(values) {
      console.log( values);
      let username = values.username
      let pwd = values.password
        // console.log(username);
        // console.log(pwd);
        Getdenglu(username,pwd).then(res=>{
            console.log(res);
            this.token = res.data.token
            let token = this.token
            let name = res.data.userInfo.username
            // console.log(token);
            localStorage.setItem('token',token)
            localStorage.setItem('name',name)
         this. names =   localStorage.getItem('name')
         this. token =   localStorage.getItem('token')
            
         this.use = res.data.userInfo.username
        })
    },
    shan(){
        this.token = ''
        this.names=""
        localStorage.removeItem('token')
        localStorage.removeItem('name')
    }
    },
    created(){
        this.token =localStorage.getItem('token')

        this.names =localStorage.getItem('name')
    }
};
</script>

<style  scoped>
#dl{
    width: 100%;
    height: 100%;
    background-color: #efefef;
    position: absolute;
    top:0;
    z-index: 999999;
    
}
#tou{
    width: 100%;
    height: 110px;
    background-color: #333333;
}
.van-icon{
    font-size: 80px;
    color: #F8F3F0;
    margin-top: -20px;
    margin-left: -270px;
}
#djdl{
    margin-left: -100px;
    margin-top: -50px;
    color: #F8F3F0;
    font-size: 10px;
}
#xys{
    margin-left: 350px;
    margin-top: -25px;
    color: #F8F3F0;
}
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    width: 337px;
    height: 240px;
    background-color: #ffffff;
  }
 #mz{
    color: #efefef;

 }
 #cha{
    color: #000000;

 }
</style>